/**
* @description: 步骤条-会商执行
* @author: zhaohui
* @data:2023年6月10日
* @remark:
**/
<template>
	<view>
		<van-steps class="steps" direction="vertical" :active="active" active-color="#417ADC" inactive-color="#666666">
			<van-step v-for="(item,index) in setpList" :key="index">
				<template v-slot:inactive-icon>
					<img src="../../../static/standardizedOperationImg/steps-icon.png"></img>
				</template>
				<template v-slot:active-icon>
					<img src="../../../static/standardizedOperationImg/steps-icon.png"></img>
				</template>
				<view class="steps-title">

				</view>
				<view class="step-item">
					<view class="step-item-child">
						<text
							:class="flowState !== '1' ? 'step-item-child-name':'step-item-child-name-true'">{{item.flowName}}</text>
						<view class="child-button" v-if="flowState ==='2'">
							<button @click="operate(item,'查看')" v-if="item.buttonState === 1"
								class="step-item-child-color-false">查看</button>
						</view>
						<view class="child-button" v-else>
							<button @click="operate(item,'查看')" v-if="item.buttonState === 1"
								class="step-item-child-color-false">查看</button>
							<button @click="operate(item,'编辑')"
								v-if="item.buttonState === 1 && type !== 'maintenancePreparation'"
								class="step-item-child-color-false">编辑</button>
							<button @click="operate(item,'填写')"
								v-if="item.buttonState === 0 && index === 0 && type !== 'maintenancePreparation'"
								class="step-item-child-color-false">填写</button>
							<button @click="operate(item,'确认')"
								v-if="item.buttonState === 0 && index > 0  && type !== 'maintenancePreparation'"
								class="step-item-child-color-false">确认</button>
						</view>
					</view>
					<view class="jobMsg" v-if="item.flowName === '作业信息'&&item.selectworkinfo">
						<view class="step-item-child-time">
							{{`计划作业时间：${planTime(item.selectworkinfo)}`}}
						</view>
						<view class="step-item-child-time">
							{{`作业责任人：${item.selectworkinfo.workPlanPerson?item.selectworkinfo.workPlanPerson:""}`}}
						</view>
						<view class="step-item-child-time">
							{{`作业成员：${item.selectworkinfo.peoplelistName2}${item.selectworkinfo.peoplelistName3 ? ',' + 
							item.selectworkinfo.peoplelistName3 : ""}`}}
						</view>
					</view>
					<view class="step-item-child-time" v-if="item.flowName === '作业项目' && item.zyxmSize !== 0">
						{{`作业内容已确认${item.zyxmSize}项`}}
					</view>
					<view class="step-item-child-time" v-if="item.flowName === '危险点分析及预控措施' && item.wxcsSize !== 0">
						{{`危险点分析及预控措施内容已确认${item.wxcsSize}项`}}
					</view>
					<view class="step-item-child-time" v-if="item.flowName === '检修备件' && item.jxbjSize !== 0">
						{{`检修备件已确认${item.jxbjSize}项`}}
					</view>
				</view>
			</van-step>
		</van-steps>
	</view>

</template>

<script>
	import {
		Toast,
	} from 'vant';
	export default {
		// props: ["setpList", "active","type"],
		props: {
			setpList: {
				type: Array,
				default: function() {
					return []
				}
			},
			active: {
				type: String,
				default: ""
			},
			type: {
				type: String,
				default: ""
			},
			flowState: {
				type: String,
				default: ""
			}
		},
		data() {
			return {}
		},
		methods: {
			/**
			 * @param {Object} data
			 * buttonPower 0：按钮可点击，1：按钮不可点击
			 */
			operate(data, text) {
				// if (data.buttonPower === 1) {
				// 	Toast('无此权限')
				// 	return
				// }
				this.$emit("operate", data, text)
			},
			/**
			 * 计划作业时间
			 * @param {Object} data
			 */
			planTime(data) {
				if (data.workPlanEndtime) {
					return `${data.workPlanStrtime} ~ ${data.workPlanEndtime}`
				} else {
					return data.workPlanStrtime
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.steps {
		img {
			width: px2vw(36);
			height: px2vw(36);
			object-fit: contain;
		}

		.steps-title {
			display: flex;

		}

		.step-item-child {
			display: flex;
			justify-content: space-between;
			background-color: #F7F7F7;
			align-items: center;
			border-radius: px2vw(10);
			width: 100%;
			height: px2vw(120);
			padding: 0 px2vw(24) 0 px2vw(40);
			box-sizing: border-box;

			.child-button {
				display: flex;
			}

			.step-item-child-name,
			.step-title-name-true {
				font-size: px2vw(42);
				line-height: px2vw(62);
			}

			.step-item-child-name {
				color: #666666;
			}

			.step-title-name-true {
				color: #417ADC;
			}

			.step-item-child-color,
			.step-item-child-color-false {
				width: px2vw(170);
				height: px2vw(80);
				font-size: px2vw(36);
				line-height: px2vw(80);
				border-radius: px2vw(10);
				text-align: center;
				margin-left: px2vw(20);
			}

			.step-item-child-color {
				color: #FFFFFF;
				background-color: #3CDA68;
			}

			.step-item-child-color-false {
				color: #FFFFFF;
				background-color: #417ADC;
			}
		}

		.step-item-child-time {
			font-size: px2vw(30);
			line-height: px2vw(62);
			color: #666666;
			opacity: 0.6;
			margin-top: px2vw(30);
		}
	}
</style>
